<template>
  <view class="task-todo">
    <view class="task-todo-top">
      <view class="task-todo-left">
        <!-- <view class="task-todo-town-name">{{ csjEnterpriseName }}</view> -->
        <view class="task-todo-town-name">{{ cEnterpriseName }}</view>
        <view class="task-todo-status">
          任务状态:
          <view :class="['task-todo-status-filter', Number(status) === 1 ? 'blue' : Number(status) === 2 ? 'green' : Number(status) === 3 ? 'red' : Number(status) === 4 ?'orange': 'reject']">
            {{ status | statusFilter }}
          </view>
        </view>
      </view>
      <view v-if="Number(status) === 2 || Number(status) === 5" class="task-todo-img">
        <u-image v-if="Number(status) === 2" mode="widthFix" :src="implementStatus2" />
        <u-image v-else mode="widthFix" :src="implementStatus5" />
      </view>
    </view>
    <view class="task-todo-content">
      <view class="task-todo-content-title">
        <text class="task-todo-content-title-text">审批</text>
      </view>
      <view v-if="Number(status) === 1 || Number(status) === 3" class="task-todo-content-img">
        <task-status-ing />
      </view>
      <view v-if="Number(status) === 1 || Number(status) === 3" class="task-todo-content-btn">
        <button type="primary" @click="gotoTaskEnd">去确认完成</button>
      </view>
      <view v-else-if="Number(status) === 2 || Number(status) === 4 || Number(status) === 5">
        <task-steps :list="stepsList" :status="Number(status)" />
      </view>
    </view>
  </view>
</template>

<script type="text/ecmascript-6">
// 任务状态,乡镇页面
import { approvalList } from '@/api/task';
import TaskStatusIng from './components/TaskStatusIng';
import TaskSteps from './components/TaskSteps';
import { Message } from '@/utils/utils';
import { getAvatar } from '@/api/task/taskDetail';
import { getAppId } from '@/utils/local'; //

// import { getUserAvatar } from '@/pages/TaskDetail/common';
import getConfig from '@/server/getConfig';
export default {
  components: {
    TaskStatusIng,
    TaskSteps
  },
  filters: {
    statusFilter(status) {
      if (Number(status) === 1) {
        return '进行中';
      } else if (Number(status) === 2) {
        return '完 成';
      } else if (Number(status) === 3) {
        return '延 期';
      } else if (Number(status) === 4) {
        return '已提交完成,等待审核';
      } else if (Number(status) === 5) {
        return '驳回';
      }
    }
  },
  data() {
    return {
      status: undefined,
      detailTaskGuid: '',
      csjEnterpriseName: '',
      implementStatus2: require('@/static/img/task/implementStatus2.svg'),
      implementStatus5: require('@/static/img/task/implementStatus5.svg'),
      stepsList: [],
      // editUserName: '', // 审核人名字
      detailsOne: {},
      cEnterpriseName: '',
      taskGuid: '',
      editUserInfo: {} // 审批人头像数据
    };
  },
  async created() {
    this.getDetailsOne();
    if (Number(this.status) === 2 || Number(this.status) === 4 || Number(this.status) === 5) {
      await this.getApprovalList();
    }
  },
  methods: {
    getDetailsOne() {
      const { csjEnterpriseName, guid, editUserInfo } = this.$store.state.task.resData;
      this.csjEnterpriseName = csjEnterpriseName;
      this.taskGuid = guid;
      this.editUserInfo = editUserInfo;
      this.detailsOne = this.$store.state.task.detailsOne;
      if (JSON.stringify(this.detailsOne) === '{}') {
        Message('没有检测到该用户的任务');
        setTimeout(() => {
          this.$router.go(-1);
        }, 1500);
      } else {
        const { status, detailTaskGuid, cEnterpriseName } = this.detailsOne;
        this.status = status;
        this.cEnterpriseName = cEnterpriseName;
        this.detailTaskGuid = detailTaskGuid;
      }
    },
    gotoTaskEnd() {
      this.$router.replace({
        path: '/taskdetail/taskend',
        query: {
          ...this.$route.query,
          cEnterpriseName: this.cEnterpriseName,
          status: this.status,
          detailTaskGuid: this.detailTaskGuid,
          taskGuid: this.taskGuid
        }
      });
    },

    // 获取头像
    getAvatarMy(data) {
      const app_Id = getAppId();
      data.forEach((item, index) => {
        setTimeout(async() => {
          const res = await getAvatar({
            avatar: item.editUser.avatar,
            avatarId: item.editUser.avatarId,
            userId: item.editUser.id,
            app_Id
          });
          if (res.success) {
            const result = `data:image/png;base64,${res.data}`;
            this.$set(this.stepsList[index], 'img', result);
          }
        }, index * 500);
      });
    },

    // 用户头像
    // async setUserAvatar(user, index, app_Id) {
    //   console.log(user, 'user');
    //   const { avatar, avatarId, id } = user;
    //   // if (avatar || avatarId) {
    //   await getAvatar({
    //     avatar,
    //     avatarId,
    //     userId: id,
    //     app_Id
    //   }).then(res => {
    //     console.log(res, 'res');
    //   });
    // },

    async getApprovalList() {
      const { success, data } = await approvalList({
        detailTaskGuid: this.detailTaskGuid,
        pageSize: 999
      });
      if (success) {
        const { data: { ApiUrl }} = await getConfig();

        if (Number(this.status) === 4) {
          data.push({
            annexIds: '',
            editUserTypeName: '审核人',
            // editName: this.editUserName,
            editUser: this.editUserInfo,
            content: '等待审核...'
          });
        }
        // 显示附件图片
        data.forEach((item, index) => {
          const imgArr = [];
          item.annexIds && item.annexIds.forEach(item => {
            console.log(ApiUrl);
            imgArr.push({
              imgurl: ApiUrl + 'file/downloadById' + `?id=${item}&fileName=${item}`
            });
          });
          data[index].imgArr = imgArr;
        });
        this.stepsList = data;
        this.getAvatarMy(data);
        if (Number(this.status) === 2) {
          this.stepsList[this.stepsList.length - 1].content = '审批人通过了申请';
        }
      }
      return Promise.resolve();
    }
  }

};
</script>

<style lang="scss" scoped>
.task-todo{
  // margin-top: 12px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .task-todo-top{
    display: flex;
    background-color: #fff;
    .task-todo-left{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .task-todo-town-name{
        padding: 13px;
        font-size: 17px;
        color: #303133;
        font-weight: 550;
      }
      .task-todo-status{
        display: flex;
        padding-left: 13px;
        padding-bottom: 13px;
        background-color: #fff;
        font-size: 17px;
        color: #b6b9bf;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 550;
        .task-todo-status-filter{
          padding-left: 10px;
        }
        .blue{
          color: #4FACFF;
        }
        .red {
          color: #FF8168;
        }
        .green {
          color: #2AD28C;
        }
        .orange {
          color: #FFB100;
        }
        .reject{
          color: #EB5F49;
        }
      }
    }
    .task-todo-img{
      width: 91px;
      height: 86px;
      margin: 13px;
    }
  }
  .task-todo-content{
    flex: 1;
    margin-top: 12px;
    background-color: #fff;
    padding-bottom: 12px;
    .task-todo-content-title{
      padding:12px;
      height: 60px;
      .task-todo-content-title-text{
        color: #303133;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .task-todo-content-img{
      padding: 20px;
    }
    .task-todo-content-btn{
      padding: 0 44px;
      .u-size-default{
        height: 44px;
        font-size: 18px;
      }
    }
  }
}
</style>
